<script setup>
import {Notification} from "@arco-design/web-vue";
import {ref} from 'vue'
import apiAll from "@/api/apiAll.js";

const emits = defineEmits(["success"]);
const visible = ref(false)
const form = ref({})
const loading = ref(false)

const handleOk = () => {
  loading.value = true
  let param = JSON.parse(JSON.stringify(form.value))
  delete param.enableProtocols;
  delete param.enableCipherSuites;
  param.enableProtocols = JSON.stringify(form.value.enableProtocols)
  param.enableCipherSuites = JSON.stringify(form.value.enableCipherSuites)

  const formData = new FormData();
  for (let key in param) {
    formData.append(key, param[key])
  }
  const jks = document.getElementById('jks');
  if (jks.files[0] !== undefined)
    formData.append('file', jks.files[0]);
  apiAll.sslApi.update(formData, {
    'Content-Type': 'multipart/form-data'
  }).then(res => {
    Notification.success('更新成功')
    emits('success')
    visible.value = false;
  }).finally(() => {
    setTimeout(() => {
      loading.value = false
    }, 300)
  })
};
const handleCancel = () => {
  visible.value = false;
}
const show = (name) => {
  apiAll.sslApi.get(name).then(res => {
    if (res.data.protocols)
      res.data.protocols = JSON.parse(res.data.protocols)
    if (res.data.enableProtocols)
      res.data.enableProtocols = JSON.parse(res.data.enableProtocols)
    if (res.data.cipherSuites)
      res.data.cipherSuites = JSON.parse(res.data.cipherSuites)
    if (res.data.enableCipherSuites)
      res.data.enableCipherSuites = JSON.parse(res.data.enableCipherSuites)

    form.value = res.data
    visible.value = true;
  })
}
defineExpose({show});
</script>

<template>
  <a-drawer :width="660" :ok-loading="loading" :visible="visible" @ok="handleOk" @cancel="handleCancel"
            ok-text="保存提交" unmountOnClose>
    <template #title>
      编辑证书
    </template>
    <div class="flex-column">
      <a-form :model="form" :style="{ width: '600px' }">
        <a-form-item field="name" tooltip="唯一名称" label="名称">
          <a-input v-model="form.name" :disabled="true" placeholder="请输入名称"/>
        </a-form-item>
        <a-form-item field="type" label="证书类型">
          <a-select v-model="form.type" :style="{width:'150px'}" placeholder="证书类型" disabled>
            <a-option value="openssl">openssl</a-option>
          </a-select>
        </a-form-item>
        <a-form-item v-if="form.type==='jks'" label="jks文件">
          <input id="jks" type="file" accept=".jks" placeholder="选择证书jks"/>
          <span style="color: red">修改证书时请重新上传</span>
        </a-form-item>
        <a-form-item field="password" label="密码">
          <a-input v-model="form.password" placeholder="私钥密码"/>
        </a-form-item>
        <a-form-item field="remarks" label="备注">
          <a-textarea v-model="form.remarks" placeholder="备注" :max-length="125" allow-clear show-word-limit/>
        </a-form-item>
        <a-divider/>
        <a-form-item field="domain" label="证书域名">
          <a-input v-model="form.domain" :disabled="true"/>
        </a-form-item>
        <a-form-item field="startTime" label="签发时间">
          <a-input v-model="form.startTime" :disabled="true"/>
        </a-form-item>
        <a-form-item field="endTime" label="到期时间">
          <a-input v-model="form.endTime" :disabled="true"/>
        </a-form-item>
        <a-form-item field="protocols" label="支持的协议">
          <div class="flex-wrap">
            <a-tag v-for="tag in form.protocols" style="margin: 0 10px 10px 10px">{{ tag }}</a-tag>
          </div>
        </a-form-item>
        <a-form-item field="enableProtocols" label="启用的协议">
          <a-checkbox-group v-model="form.enableProtocols">
            <a-checkbox v-for="e of form.protocols" :value="e">{{ e }}</a-checkbox>
          </a-checkbox-group>
        </a-form-item>
        <a-form-item field="cipherSuites" label="支持的加密算法">
          <div class="flex-wrap">
            <a-tag v-for="tag in form.cipherSuites" style="margin: 0 10px 10px 10px">{{ tag }}</a-tag>
          </div>
        </a-form-item>
        <a-form-item field="enableCipherSuites" label="启用的加密算法">
          <a-checkbox-group v-model="form.enableCipherSuites">
            <a-checkbox v-for="e of form.cipherSuites" :value="e">{{ e }}</a-checkbox>
          </a-checkbox-group>
        </a-form-item>
      </a-form>
    </div>
  </a-drawer>
</template>

<style scoped>
</style>